import React from 'react'
import { Routes, Route, Link, NavLink } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import A from './pages/A'
import B from './pages/B'
export default function App() {
  return (
    <div>
      <NavLink
        to="/home"
        className={({ isActive }) => {
          console.log('首页', isActive)
          return isActive ? 'xxx-abc' : ''
        }}
        style={({ isActive }) => {
          return isActive ? { color: 'hotpink' } : {}
        }}
        // 加了这个end.则home下面的二级导航高亮了,则一级导航就不会在高亮了
        end
      >
        首页
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => {
          console.log('关于', isActive)
          return isActive ? 'xxx-abc' : ''
        }}
        style={({ isActive }) => {
          return isActive ? { color: 'hotpink' } : {}
        }}
        // 添加了replace则修改路径时为替换历史记录. 默认是添加历史记录
        // replace
      >
        关于
      </NavLink>
      <hr />
      {/* 注意: 前端路由规则配置代码写在哪里,未来要切换的视图就渲染在哪里 */}
      <Routes>
        {/* 注意:一级路由的Route配置在哪里,则对应组件的结构渲染到哪里 */}
        <Route path="home" element={<Home></Home>}>
          {/* 按照react-router-dom的语法要求,嵌套路由的Route必须写在自己父级的子节点位置 */}
          <Route path="a" element={<A></A>}></Route>
          <Route path="b" element={<B></B>}></Route>
        </Route>
        {/* 定义路由参数,直接在路径后面写/:参数名 */}
        {/* 注意: 默认定义了路由参数就必须传递,否则About无法渲染 */}
        {/* <Route path="about/:xxx" element={<About></About>}></Route> */}
        {/* 如果希望xxx是可选的参数,应该按照下面的方式实现 */}
        <Route path="about">
          <Route path=":xxx" element={<About></About>}></Route>
          <Route path="" element={<About></About>}></Route>
        </Route>
      </Routes>
      <hr />
    </div>
  )
}
